<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
   // 事件监听：软件设计 ：观察者模式  是一个观察者模式的体现
  //    addEventListener chrome 及IE 8以上浏览器
    //   var btn =   document.querySelector("button");
    //   btn.onclick = function(){
    //       console.log("点击");
    //   }
    //   btn.onclick = function(){
    //       console.log("点击2");
    //   }

    // btn.addEventListener("click",function(){
    //     console.log("点击1");
    // })
    // btn.addEventListener("click",function(){
    //     console.log("点击2");
    // })
    // 区别 1.addEventListener可以绑定多个事件 2 只有事件类型

    // IE 8及一下  attachEvent  注意：事件需要加on
    // btn.attachEvent("onclick",function(){
    //     console.log("点击1");
    // })
    // btn.attachEvent("onclick",function(){
    //     console.log("点击2");
    // })

    // addEventListener 和 attachEvent  区别 1. 是否加on 2.执行顺序addEventListener顺序注册 顺序执行 ，attachEvent 顺序注册，倒序执行
    
    // 封装一个兼容函数 util tool
    // function bindEvent(ele,eventName,fn){
    //     if(window.addEventListener){
    //         ele.addEventListener(eventName,fn);
    //     }else{
    //         ele.attachEvent("on"+eventName,fn);
    //     }
    // }
    
    // bindEvent(btn,"click",function(){
    //     console.log("点击了");
    // })
    </script>
</body>
</html>